<!DOCTYPE html>
<html lang="en">

<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link href="../static/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../static/css/ken-burns.css" rel="stylesheet" type="text/css" media="all"/> <!-- 轮播图样式 -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
    <link rel="stylesheet" type="text/css" href="../static/css/home.css">

    <script src="../static/js/jquery-2.2.3.min.js"></script>
    <script src="../static/js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏固定 -->
    <script type="text/javascript" src="../static/js/move-top.js"></script>
    <script type="text/javascript" src="../static/js/easing.js"></script><!-- 过渡 -->
    <script src="../static/js/bootstrap.js"></script>
    <script src="../static/js/jquery.menu-aim.js"></script> <!-- 底部导航栏 -->
    <script src="../static/js/main.js"></script><!-- 导航栏 -->
</head>
<style>
    #category{
        position: absolute;
        top: 11px;
        left: 110px;
        width: 10px;
        height: 20px;
    }
</style>

<body>
<div id="contentContainer">
<div class="header">
    <div class="w3ls-header">
        <div class="w3ls-header-left">
            <p>
                <a href="#"><img style="position: relative;left: -10px; top: -1px" src="../static/images/shopping.png">
                    XB全新高端购物平台
                </a>
            </p>
        </div>
        <div class="w3ls-header-right">
            <ul>
                <li class="dropdown head-dpdn">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"
                                                                                  aria-hidden="true"></i>{{name}}<span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/view/profile">个人中心</a></li>
                      <li><a   @click="logout()">注销</a></li>
                    </ul>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="/view/car" class="dropdown-toggle"><i class="fa fa-gift" aria-hidden="true"></i>购物车</a>
                </li>
                <li class="dropdown head-dpdn">
                     <a href="/view/waitPay" class="dropdown-toggle"><i class="fa fa-credit-card-alt"
                                                                      aria-hidden="true"></i>待支付</a>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="header-two">
        <div class="container">
            <div class="header-logo">
                <h1><a href="home.html"><span>X</span>Biao </a></h1>
                <h6>Your stores. Your place.</h6>
            </div>
            <div class="header-search">
                <form action="#" method="post">
                    <input type="search" name="Search" placeholder="Search for a Product..." required="">
                    <button type="submit" class="btn btn-default" aria-label="Left Align">
                        <i class="fa fa-search" aria-hidden="true"> </i>
                    </button>
                </form>
            </div>
            <div class="header-cart">
                <div class="my-account">
                    <a href="javascript:;"></a>
                </div>
                <div class="cart">
                   <a href="/view/car">
                        <button class="w3view-cart" type="submit" name="submit" value=""><i
                                class="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
                    </a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="header-three">
        <div class="container">
            <ul class="nav nav-pills nav-justified" >
                <li v-for="catList in catalogue.data">
                    <a href="/view/productList" @click="findByCategory(catList.category)">{{catList.category | judge}}</a>
<!--                    <input type="button"   @click="findByCategory(catList.category)" id="category">-->
                </li>
            </ul>
        </div>
    </div>
</div>
<div>
    <input type="button" @click="testImg()" >
    <div class="banner">
        <div id="kb" class="carousel kb_elastic animate_text kb_wrapper" data-ride="carousel" data-interval="6000"
             data-pause="hover">

            <div class="carousel-inner" role="listbox" >

                <div class="item active"  v-for="obj in lunboImg.data">
                    <img :src="obj.imageurl" alt="" class="img-responsive"/>
                    <div class="carousel-caption kb_caption kb_caption_right">
                        <h3 data-animation="animated flipInX">Flat <span>50%</span> Discount</h3>
                        <h4 data-animation="animated flipInX">Hot Offer Today Only</h4>
                    </div>
                </div>
              <div class="item">
                    <!-- Second-Slide -->
                    <img src="/static/images/8.jpg" alt="" class="img-responsive"/>
                    <div class="carousel-caption kb_caption kb_caption_right">
                        <h3 data-animation="animated fadeInDown">Our Latest Fashion Editorials</h3>
                        <h4 data-animation="animated fadeInUp">cupidatat non proident</h4>
                    </div>
                </div>

                <div class="item">
                    <!-- Third-Slide -->
                    <img src="/static/images/3.jpg" alt="" class="img-responsive"/>
                    <div class="carousel-caption kb_caption kb_caption_center">
                        <h3 data-animation="animated fadeInLeft">End Of Season Sale</h3>
                        <h4 data-animation="animated flipInX">cupidatat non proident</h4>
                    </div>
                </div>

            </div>
            <!-- Left-Button -->
            <a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">
                <span class="fa fa-angle-left kb_icons" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <!-- Right-Button -->
            <a class="right carousel-control kb_control_right" href="#kb" role="button" data-slide="next">
                <span class="fa fa-angle-right kb_icons" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    </div>

    <!--最新商品-->
    <div class="add-products">
        <div class="container">
            <h3 class="w3ls-title">最新商品</h3>
            <div class="add-products-row">
                <!--
                 newListImg:{},  //最新的四张图片
                 hotListImg:{}   //热卖的四张图片-->
                <div class=" w3ls-add-grids" v-for="newlist in newListImg.data" @click="goodsdetail(newlist.id)">
                    <a href="/view/goodsDetail">
                        <img :src="newlist.mainimage">
                        <p>{{newlist.tile}}<span>&nbsp&nbsp&nbsp${{newlist.price}}</span>&nbsp&nbsp&nbsp库存:{{newlist.repertory}} </p>
                        <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                    </a>
                </div>
                <div class="clerfix"></div>
            </div>
        </div>
    </div>

    <!--最热商品-->
    <div class="add-products">
        <h3 class="w3ls-title">热卖商品</h3>
        <div class="container">
            <div class="add-products-row">
                <div class=" w3ls-add-grids" v-for="hotlist in hotListImg.data" @click="goodsdetail(hotlist.id)">
                    <a href="/view/goodsDetail" >
                        <img :src="hotlist.mainimage">
                        <p>{{hotlist.desc}}<span>&nbsp&nbsp&nbsp${{hotlist.price}}</span>&nbsp&nbsp&nbsp库存:{{hotlist.repertory}} </p>
                        <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
<!--轮播图-->

<div class="copy-right">
    <div class="container">
        <p>Copyright &copy; 2020.XB All rights reserved.<a target="_blank" href="#"></a></p>
    </div>
</div>
</div>

</body>
<script src="/static/js/custom.js"></script>
<script  src="/static/js/layer.js"></script>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/axios.js"></script>
<script src="/static/js/shop/home.js"></script>

</html>